<template>
  <div class="content">
    <span class="layui-badge-dot"></span>
    <span v-for="color in colors" :key="color" :class="['layui-badge-dot', `bg-${color}`]"></span>
    <fieldset>
      <legend>资料修改</legend>
      <fieldset class="message">
        <legend>资料修改</legend>
        <div >
          <el-input value="12345" disabled>
            <template slot="prepend">学号</template>
          </el-input>
          <el-input value="小灰">
            <template slot="prepend">姓名</template>
          </el-input>
          <div class="upload-head" style="margin: 10px auto">
            <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card">
              <el-button size="small" type="primary">
                <li class="el-icon-upload"></li>
                点击上传
              </el-button>
            </el-upload>
          </div>
          <el-autocomplete
              class="inline-input"
              v-model="school"
              :fetch-suggestions="querySearch"
              placeholder="输入选择"
              @select="handleSelect"
              :popper-append-to-body="false">
            <template #prepend>学校</template>
          </el-autocomplete>
          <div class="radio-button">
            <span style="display:inline-block;
            color: #909399;font-size: 14px;width: 100px;
            text-align: center;line-height: 38px;border: 1px solid #DCDFE6;
            background: #F5F7FA;padding: 0 20px">
              性别
            </span>
            <el-radio-group v-model="radio">
              <el-radio :label="3">男</el-radio>
              <el-radio :label="6" checked>女</el-radio>
            </el-radio-group>
          </div>
          <el-button type="success" style="margin-top: 20px">
            保存
          </el-button>
        </div>
      </fieldset>
    </fieldset>
  </div>
</template>
<script>
export default {
  name: 'UserRevampInformation',
  data() {
    return {
      colors: ['orange', 'green', 'cyan', 'blue', 'gray'],
      school: '',
      radio: 6
    }
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        {value: '中山大学'},
        {value: '广州大学'},
        {value: '清华大学'}
      ]
    },
    handleSelect(item) {
      console.log(item);
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.content {
  width: 100%;
  padding: 30px;
}

.layui-badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: pink;
  margin: 2px;
}

.bg-orange {
  background-color: #FFB900;
}

.bg-green {
  background-color: #009688;
}

.bg-cyan {
  background-color: #03A9F4;
}

.bg-blue {
  background-color: #2196F3;
}

.bg-gray {
  background-color: #9E9E9E;
}

fieldset:not(.message) {
  padding-left: 20px;
  border: 0;
  border-top: 1px solid #DCDFE6;
  margin: 10px 50px 0 50px;
  font-size: 20px;
  height: 95%;
}

fieldset legend {
  padding: 0 10px;
}

.message {
  margin: 20px 20px 20px 60px;
  padding-left: 20px;
  border: 1px solid #DCDFE6;
  font-size: 20px;
  height: 100%;
}

.message .el-input {
  margin-top: 20px;
}

::v-deep .message .el-input-group__prepend {
  width: 100px;
  text-align: center;
}

::v-deep .message .el-input__inner {
  width: 250px;
}

::v-deep .el-upload-list__item {
  width: 150px;
  height: 150px;
}

.upload-demo {
  margin-top: 20px;
}
.radio-button{
  margin-top: 20px;
}
.radio-button .el-radio-group{
  border: 1px solid #DCDFE6;
  width: 250px;
  height: 38px;
  text-align: center;
  line-height: 38px;
}
</style>